<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
<div id="app1">
    <component-a></component-a>
    <component-b></component-b>
</div>

<script src="../js/vue.min.js"></script>
<script>
    var bus = new Vue()
    var componnetA = {
        template: '<button v-on:click="aa">1</button>',
        data(){
            return{
                meg: 0
            }
        },
        methods:{
            aa: function(){
                bus.$emit('aa', this.meg++)
            }
        }
    }
    var componentB = {
        template: '<button>2</button>',
        mounted() {
            bus.$on('aa', function(text){
                console.log('我是由组件1传过来的' + text)
            })
        }
    }
    var app1 = new Vue({
        el: '#app1',
        components: {
            componentA: componnetA,
            componentB: componentB
        }
    })
</script>
</body>
</html>